<template>
  <div>
    <div>
      <button @click="componentName = 'One'">One</button>
      <button @click="componentName = 'Two'">Two</button>
      <button @click="componentName = 'Three'">Three</button>
    </div>
    <!-- 缓存组件 -->
    <keep-alive include="One,Two">
      <!-- 动态组件 -->
      <component :is="componentName"></component>
    </keep-alive>
  </div>
</template>

<script>
// 异步组件，需要被渲染时才会触发，会把结果缓存起来供未来重渲染
const One = () => {
  return import("@/components/One");
};
const Two = () => {
  return import("@/components/Two");
};
const Three = () => {
  return import("@/components/Three");
};
export default {
  name: "App",
  components: {
    // 写法二
    One: () => import("@/components/One"),
    Two,
    Three,
  },
  data() {
    return {
      componentName: "One",
    };
  },
};
</script>

<style>
</style>